<template>
  <div class="login-container">
    <div class="logo">
      <img src="/static/images/logo1.png" alt="">
    </div>

    <div class="form" v-if="isFirst">
      <form action="">
        <div class="box">
          <p class="label">用户名</p>
          <el-input class="input" v-model="user.phoneNumber" clearable placeholder="请输入手机号码"></el-input>
        </div>
        
        <div class="box box2" >
          <p class="label label2">验证码</p>
          <div class="space-between">
            <el-input class="input input2" v-model="user.code" clearable placeholder="请输入验证码"></el-input>
            <el-button class="danger" size="mini" type="danger" :disabled="disabledCode" round @click="getCode(user.phoneNumber)">{{codeValue}}</el-button>
          </div>
        </div>

        <el-button type="primary" class="submit-btn" :disabled="disabled" round @click="goNext()">下一步</el-button>
        <p class="go-phone">
          遇到问题？
          <router-link to="">
            提交账户申诉
          </router-link>
        </p>
      </form>
    </div>

    <div class="form" v-if="isSecond">
      <form action="">
        <div class="box">
          <p class="label">请设置新的登录密码</p>
          <el-input class="input" v-model="user.newPassword" type="password" clearable placeholder="请输入密码"></el-input>
        </div>
        
        <div class="box box2">
          <p class="label">重复密码</p>
          <el-input class="input" v-model="user.newPassword2" type="password" clearable placeholder="请重复密码"></el-input>
        </div>

        <el-button type="primary" class="submit-btn" :disabled="disabledSuccess" round @click="submit()">完成</el-button>
        <p class="go-phone">
          遇到问题？
          <router-link to="">
            提交账户申诉
          </router-link>
        </p>
      </form>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
  export default {
    name: "index",
    data() {
      return {
        user: {
          phoneNumber: '',
          code: '',
          newPassword: '',
          newPassword2: ''
        },
        isFirst: true,
        isSecond: false,
        disabledCode: false,
        timer: null,
        count: 120,
        codeValue: "获取验证码"
      }
    },
    computed: {
      disabled() {
        if(this.user.code == '') {
          return true;
        } else {
          return false;
        }
      },
      disabledSuccess() {
        if(this.user.newPassword == '') {
          return true;
        } else {
          return false;
        }
      }
    },
    created() {
      
    },
    mounted() {

    },
    methods: {
      goNext() {
        //下一步按钮
          this.isFirst = false;
          this.isSecond = true;

        if(this.user.phoneNumber == '') {
          Toast({
            message: '用户名不能为空',
            position: 'middle'
          });
          return false;
        } else if(this.user.code == '') {
          Toast({
            message: '验证码不能为空',
            position: 'middle'
          });
          return false;
        } else {
          //接口
        }
      },
      getCode(phoneNumber) {
        //获取验证码
        if(this.user.phoneNumber == '') {
          Toast({
            message: '手机号码不能为空',
            position: 'middle'
          });
          return false;
        } else if(!this.$utils.phoneReg.test(this.user.phoneNumber)) {
          Toast({
            message: '手机号码格式不正确',
            position: 'middle'
          });
          return false;
        } else {
          this.timer = "";
          this.timer = setInterval(() => {
            if (this.count > 1 && this.count <= 120) {
              this.disabledCode = true;
              this.count--;
              this.codeValue = this.count + "s 获取";
            } else {
              this.disabledCode = false;
              this.count = 120;
              this.codeValue = "获取验证码";
              clearInterval(this.timer);
              this.timer = "";
            }
          }, 1000);
        
        }
      },
      submit() {
        //提交按钮
        if(this.user.newPassword == '') {
          Toast({
            message: '密码不能为空',
            position: 'middle'
          });
          return false;
        } else if(this.user.newPassword2 == '') {
          Toast({
            message: '确认密码不能为空',
            position: 'middle'
          });
          return false;
        } else if(this.user.newPassword2 !== this.user.newPassword) {
          Toast({
            message: '两次密码不一致!',
            position: 'middle'
          });
          return false;
        } else {
          //接口
          Toast({
            message: '提交成功！',
            iconClass: 'icon icon-success'
          });
        }
      }
    }
  }
</script>

<style lang="less" scoped>
.login-container{
  background: #fff;
  padding: 34/37.5rem 0;
  .logo{
    width: 244/37.5rem;
    margin: 0 auto 53/37.5rem;
    img{
      width: 100%;
    }
  }
  .form{
    padding: 0 65/37.5rem;
    .box{
      margin: 0 35/37.5rem;
      border-bottom: 1px solid #ddd;
      .label{
        font-size: 36/37.5rem;
        color: #666;
        padding-left: 0.3rem;
      }
      .input2{
        width: 70%;
      }
      .danger{
        padding: 0 10px;
        height: 30px;
        margin-top: 0.2rem;
        color: red;
        background: #FF9999 !important;
      }
    }
    .box2{
      margin-top: 1rem;
    }
    .submit-btn{
      width: 627/37.5rem;
      height: 80/37.5rem;
      margin-top: 95/37.5rem;
      font-size: 34/37.5rem;
    }
    .go-phone{
      padding: 0 35/37.5rem;
      font-size: 24/37.5rem;
      margin: 0.8rem 0 1.5rem;
      display: block;
      a{
        color: #409eff;
      }
    }
    .text{
      text-align: center;
      font-size: 24/37.5rem;
      color: #bbb;
      a{
        color: #409eff;
      }
    }
  }
}
</style>
<style>
.login-container .box input{
  border: none !important;
  font-size: 36/37.5rem !important;
  color: #666 !important;
  padding: 0 0.3rem !important;
}
</style>